<template>
    <div class="first_level_page">
        <section class="tab_section">
            <div class="tab active">全部</div>
            <div class="tab">出库</div>
            <div class="tab">入库</div>
        </section>
        <div class="marginTopHeight"></div>
        <div class="inorder_demo" @click="goInorderDetail">
            <div class="inorder_top clear">
                <div class="left">
                    采购单号：070525856585525525
                </div>
                 <div class="right">
                    2016/10/10
                </div>
            </div>
            <div class="inorder_main clear">
                <div class="inorder_num_price clear">
                    <div class="left">采购数量：36</div>
                    <div class="right">¥86.00/332.00元</div>
                </div>
                <div class="inorder_address clear">
                    <img class="left" src="../../images/location1.png">
                    <div class="left">京卡去第三大街经南六路交通技术学院西门西150米路东1单元22号楼2207</div>
                </div>
            </div>
            <div class="inorder_bottom">
                <div class="btn" @click.stop="startPicking">开始配货</div>
                <div class="inorder_state right">
                    <img src="../../images/mark.png">
                    待配货
                </div>
            </div>
        </div>
        <div class="inorder_demo" @click="goInorderDetail">
            <div class="inorder_top clear">
                <div class="left">
                    采购单号：070525856585525525
                </div>
                 <div class="right">
                    2016/10/10
                </div>
            </div>
            <div class="inorder_main clear">
                <div class="inorder_num_price clear">
                    <div class="left">采购数量：36</div>
                    <div class="right">¥86.00/332.00元</div>
                </div>
                <div class="inorder_address clear">
                    <img class="left" src="../../images/location1.png">
                    <div class="left">京卡去第三大街经南六路交通技术学院西门西150米路东1单元22号楼2207</div>
                </div>
            </div>
            <div class="inorder_bottom">
                <div class="btn">开始配货</div>
                <div class="inorder_state right">
                    <img src="../../images/mark.png">
                    待配货
                </div>
            </div>
        </div>
        <div class="inorder_demo" @click="goInorderDetail">
            <div class="inorder_top clear">
                <div class="left">
                    采购单号：070525856585525525
                </div>
                 <div class="right">
                    2016/10/10
                </div>
            </div>
            <div class="inorder_main clear">
                <div class="inorder_num_price clear">
                    <div class="left">采购数量：36</div>
                    <div class="right">¥86.00/332.00元</div>
                </div>
                <div class="inorder_address clear">
                    <img class="left" src="../../images/location1.png">
                    <div class="left">京卡去第三大街经南六路交通技术学院西门西150米路东1单元22号楼2207</div>
                </div>
            </div>
            <div class="inorder_bottom">
                <div class="btn">开始配货</div>
                <div class="inorder_state right">
                    <img src="../../images/mark.png">
                    待配货
                </div>
            </div>
        </div>
        <div class="inorder_demo" @click="goInorderDetail">
            <div class="inorder_top clear">
                <div class="left">
                    采购单号：070525856585525525
                </div>
                 <div class="right">
                    2016/10/10
                </div>
            </div>
            <div class="inorder_main clear">
                <div class="inorder_num_price clear">
                    <div class="left">采购数量：36</div>
                    <div class="right">¥86.00/332.00元</div>
                </div>
                <div class="inorder_address clear">
                    <img class="left" src="../../images/location1.png">
                    <div class="left">京卡去第三大街经南六路交通技术学院西门西150米路东1单元22号楼2207</div>
                </div>
            </div>
            <div class="inorder_bottom">
                <div class="btn">开始配货</div>
                <div class="inorder_state right">
                    <img src="../../images/mark.png">
                    待配货
                </div>
            </div>
        </div>
        <div class="inorder_demo" @click="goInorderDetail">
            <div class="inorder_top clear">
                <div class="left">
                    采购单号：070525856585525525
                </div>
                 <div class="right">
                    2016/10/10
                </div>
            </div>
            <div class="inorder_main clear">
                <div class="inorder_num_price clear">
                    <div class="left">采购数量：36</div>
                    <div class="right">¥86.00/332.00元</div>
                </div>
                <div class="inorder_address clear">
                    <img class="left" src="../../images/location1.png">
                    <div class="left">京卡去第三大街经南六路交通技术学院西门西150米路东1单元22号楼2207</div>
                </div>
            </div>
            <div class="inorder_bottom">
                <div class="btn">开始配货</div>
                <div class="inorder_state right">
                    <img src="../../images/mark.png">
                    待配货
                </div>
            </div>
        </div>
        <div class="heightBottom"></div>
        <foot-guide></foot-guide>
       
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition> 
    </div>
</template>

<script>
    import footGuide from 'src/components/footer/footGuide'

    export default {
        data(){
            return{
            }
        },
        mounted(){
        },
        components: {
            footGuide,
        },
        methods: {
            goInorderDetail(){
                this.$router.push('/inorderDetail')
            },
            startPicking(){
                this.$router.push('/schedule/startPicking')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.3rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .marginTopHeight{
        @include wh(100%, .88rem);
    }
    .inorder_demo{
        background: #fff;
        margin-top: .2rem;
        border-bottom: .01rem solid #e3e3e3;
        .inorder_top{
            @include wh(100%, .78rem);
            border-bottom: .01rem solid #e3e3e3;
            padding: 0 .2rem;
            div{
                @include sc(.28rem, #999);
                line-height: .78rem;
            }
        }
        .inorder_main{
            border-bottom: .01rem solid #e3e3e3;
            padding: 0 .2rem;
            .inorder_num_price{
                div{
                    @include sc(.28rem, #333);
                    margin: .34rem 0 .26rem;
                    height: .28rem;
                    line-height: .28rem;
                }
            }
            .inorder_address{
                font-size: 0;
                @include wh(100%, .8rem);
                margin-bottom: .28rem;
                img{
                    @include wh(.3rem, .38rem);
                    margin: .21rem 0;
                }
                div{
                    @include wh(6.7rem, .8rem);
                    @include sc(.28rem, #333);
                    margin-left: .1rem;
                }
            }
        }
        .inorder_bottom{
            @include wh(100%, .82rem);
            padding: 0 .2rem;
            .btn{
                float: left;
                @include wh(1.6rem, .54rem);
                line-height: .54rem;
                @include sc(.28rem, $blue);
                border: .01rem solid $blue;
                border-radius: .04rem;
                text-align: center;
                margin-top: .14rem;
            }
            .inorder_state{
                @include sc(.28rem, #333);
                height: .82rem;
                line-height: .82rem;
                img{
                    @include wh(.34rem, .34rem);
                    float: left;
                    margin: .24rem .06rem;
                }
            }
        }
    }
</style>
